<template>
  <el-container class="dataManagement">
    <el-aside style="margin-top: 15px">
      <el-tree
        style="height: 100%"
        :data="data"
        :props="defaultProps"
        @node-click="handleNodeClick"
      >
        <span
          slot-scope="{ data, node }"
          style="display: flex; align-items: center"
        >
          <!-- <i :class="data.icon"></i> -->
          <img :src="data.icon" width="18px" style="margin-right: 5px" />
          <span style="padding-left: 4px">{{ node.label }}</span>
          <img
            v-if="data.add == 1"
            src="../assets/img/add.png"
            style="margin-left: 5px; width: 15px"
            @click="goPublishOperator"
          /> </span
      ></el-tree>
    </el-aside>
    <el-container style="width: 80%">
      <el-header style="height: 0.7rem">
        <el-input
          placeholder="请输入搜索内容 如名字、概要、分类等关键信息信息学"
          v-model="input"
        >
          <img
            slot="suffix"
            src="../assets/img/search.png"
            style="width: 0.3rem; cursor: pointer"
          />
          <!-- <i slot="suffix" class="el-input__icon el-icon-search"></i> -->
        </el-input>
      </el-header>
      <el-main>
        <el-table :data="tableData" height="100%" style="width: 100%">
          <el-table-column prop="sid" label="算子ID" width="80px">
          </el-table-column>
          <el-table-column prop="sname" label="算子名称"> </el-table-column>
          <el-table-column prop="versions" label="版本" width="60px">
          </el-table-column>
          <el-table-column prop="description" label="概要描述">
          </el-table-column>
          <el-table-column prop="classification" label="算法分类">
          </el-table-column>
          <el-table-column prop="source" label="算子来源"> </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-popover popper-class="mypopover" trigger="click">
                <img
                  slot="reference"
                  src="../assets/img/dot.png"
                  alt=""
                  style="cursor: pointer"
                />
                <div class="operations">
                  <div
                    v-for="item in operations"
                    :key="item.id"
                    @click="editorOperations(scope.row, item)"
                  >
                    {{ item.val }}
                  </div>
                </div>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <!-- 编辑弹窗 -->
      <el-dialog
        :title="editorTitle"
        :visible.sync="dialogFormVisible"
        class="editorDialog"
      >
        <el-form :model="form">
          <el-form-item label="名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            class="version"
            label="版本:"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="form.version"
              :readonly="true"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="分类" :label-width="formLabelWidth">
            <el-input
              v-model="form.classification"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="描述" :label-width="formLabelWidth">
            <el-input v-model="form.desc" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">关闭</el-button>
          <el-button type="primary" @click="dialogFormVisible = false"
            >确 定</el-button
          >
        </div>
      </el-dialog>
      <el-footer
        ><el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[15, 25, 35, 45]"
          :page-size="15"
          layout="sizes,prev,jumper,next,slot"
          :total="90"
        >
          <span class="pageSizeBorder">共{{ Pages }}页</span>
        </el-pagination></el-footer
      >
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: "dataManagement",
  data() {
    var menus = [
      {
        menuId: 1,
        menuName: "自定义算子",
        icon: require("../assets/img/doc.png"),
        children: [
          {
            menuId: 100,
            menuName: "用户自建算子",
            icon: require("../assets/img/doc.png"),
            add: 1,
            children: [
              {
                menuId: 1000,
                menuName: "用户自建算子",
                icon: require("../assets/img/doc.png"),
              },
            ],
          },
          {
            menuId: 101,
            menuName: "用户分享算子",
            icon: require("../assets/img/doc.png"),
            add: 1,

            children: [
              {
                menuId: 1006,
                menuName: "用户分享算子",
                icon: require("../assets/img/doc.png"),
              },
              {
                menuId: 1007,
                menuName: "用户分享算子",
                icon: require("../assets/img/doc.png"),
              },
            ],
          },
        ],
      },
    ];
    var tableData = [
      {
        sid: "1001",
        sname: "发布算子20211130_01",
        versions: "v1",
        description: "发布算子20211130_01",
        classification: "新建文件夹",
        source: "自定义",
      },

      {
        sid: "1007",
        sname: "yyf自定义算子1202",
        versions: "v1",
        description: "阿斯顿撒",
        classification: "新建文件夹23232",
        source: "自定义",
      },
      {
        sid: "1008",
        sname: "自定义算法1202_1",
        versions: "v1",
        description: "1202创建222",
        classification: "用户自建算子",
        source: "自定义",
      },
      {
        sid: "1002",
        sname: "发布算子211130_01",
        versions: "v1",
        description: "发布算子20211130_01",
        classification: "用户自建算子",
        source: "自定义",
      },
      {
        sid: "1025",
        sname: "lilitestsuanzi1",
        versions: "v1",
        description: "dfsa",
        classification: "新建文件夹",
        source: "自定义",
      },
      {
        sid: "1026",
        sname: "lilitestsuanzi1",
        versions: "v2",
        description: "dfsdf",
        classification: "新建文件夹",
        source: "自定义",
      },
      {
        sid: "1001",
        sname: "发布算子20211130_01",
        versions: "v1",
        description: "发布算子20211130_01",
        classification: "新建文件夹",
        source: "自定义",
      },
    ];
    var operations = [
      { id: 1, val: "编辑信息" },
      { id: 2, val: "编辑算子" },
      { id: 3, val: "分享" },
      { id: 4, val: "停用" },
      { id: 5, val: "启用" },
    ];

    return {
      data: menus,
      defaultProps: {
        children: "children",
        label: "menuName",
      },
      input: "",
      tableData,
      currentPage4: 4,
      visible: false,
      Pages: 6,
      operations,
      editorTitle: "算子信息", //标题

      dialogFormVisible: false,
      form: {
        name: "",
        version: "",
        classification: "",
        desc: "",
      },
      formLabelWidth: "",
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    isOperations(row) {
      console.log(row);
    },
    //编辑功能
    editorOperations(data, item) {
      if (item.id == 1 || item.id == 2) {
        this.dialogFormVisible = true;
        this.editorTitle = "算子信息";
        this.form.name = data.sname;
        this.form.version = data.versions;
        this.form.classification = data.classification;
        this.form.desc = data.description;
      } else {
        this.editorTitle = item.val;
      }
      console.log(data);
      console.log(item);
    },
    goPublishOperator() {
      this.$router.push({ name: "PublishOperator" });
    },
  },
};
</script>

<style lang="scss" scoped>
.dataManagement {
  width: 100vw;
  min-height: 100vh;
  box-sizing: border-box;
  background-color: #ffffff;
}
.el-aside {
  text-align: center;
  border-right: 1px solid #dfe6e9;
}
.el-tree {
  ::v-deep.el-tree-node {
    height: 100%;
  }
  ::v-deep.el-tree-node__content {
    height: 0.4rem;
  }
}
.el-header,
.el-footer {
  display: flex;
  align-items: center;
}
.el_input_icon {
  width: 0.3rem;
  height: 0.3rem;
  margin-left: -10px;
  //   background-color: #333;
}
.el-footer {
  justify-content: center;
}
.el-input {
  width: 40%;
  ::v-deep.el-input__inner {
    background-color: #f2f2f2;
    border: none;
    padding-right: 0.4rem;
  }
  ::v-deep.el-input__suffix {
    display: flex;
    align-items: center;
  }
}

.el-main {
  color: #333;
  text-align: center;
  border-top: 3px solid #ececec;
  padding: 0;
  height: 80vh;
}
.el-container:nth-child(2) {
  border-left: 2px solid #ececec;
}

//设置表格
.el-table {
  ::v-deep th.is-leaf.el-table__cell,
  ::v-deep td.el-table__cell {
    border-bottom: 0.01rem solid #ebeef5;
  }
  ::v-deep .el-table__body tr.hover-row > td.el-table__cell {
    background-color: #ecf8f6;
  }
}
// .el-poppe {
//   ::v-deep .popper__arrow::after {
//     display: none;
//   }
// }

.operations {
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-left: 0.15rem;
  cursor: pointer;
}
.operation > img {
  margin-left: 5px;
}

//设置分页
.el-pagination {
  /deep/ button {
    width: 0.28rem;
    height: 0.28rem;
  }
  ::v-deep.btn-next,
  ::v-deep.btn-prev {
    background-color: #ffffff;
    border-radius: 50%;
    border: 1px solid #9a9a9a;
  }
  ::v-deep.btn-next {
    margin-right: 10px;
  }
  .pageSizeBorder {
    color: #ababab;
    font-weight: 400;
  }
  /deep/input.el-input__inner {
    background-color: #ededed;
  }
}
/deep/.el-pagination__jump {
  margin: 0;
}
.editorDialog {
  /deep/.el-dialog {
    width: 35%;
  }
  /deep/ .el-dialog__header {
    border-bottom: 1px solid #e4e4e4;
  }
  /deep/.el-dialog__body {
    padding: 0.1rem 0.2rem;
  }
  /deep/ .el-input {
    width: 100%;
  }
  /deep/.el-form-item {
    margin: 0;
  }
  .version {
    /deep/ .el-input {
      width: 80%;
      .el-input__inner {
        background-color: #ffffff;
        padding-left: 0.05rem;
      }
    }
    /deep/.el-form-item__label {
      padding: 0;
    }
  }
}
</style>
